<template>
  <div>
    <el-form :inline="true" :model="filters">
      <el-form-item>
        <el-select
          v-model="filters.value1"
          clearable
          placeholder="请选择"
          @change="getRole($event)"
        >
          <el-option
            v-for="item in select1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="filters.value2"
          filterable
          placeholder="请输入查询内容"
          :loading="loading"
          @change="getList($event)"
        >
          <el-option
            v-for="item in select2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <select v-model="selectedA">
      <option value="">请选择</option>
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
    </select>
    <select v-if="selectedA === 'option1'">
      <option value="">请选择</option>
      <option value="option1-1">选项1-1</option>
      <option value="option1-2">选项1-2</option>
    </select>
    <select v-else-if="selectedA === 'option2'">
      <option value="">请选择</option>
      <option value="option2-1">选项2-1</option>
      <option value="option2-2">选项2-2</option>
    </select>
    <img :src="file.dataUrl" :alt="file.name" width="100" />
  </div>
</template>

<script>
export default {
  name: 'home',
  // 添加图片多选功能 --2022/09/20
  multiple: true,
  props: {
    value: [String, Object, Array],

    // 图片数量限制
    limit: {
      type: Number,
      default: 5
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ['png', 'jpg', 'jpeg']
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      files: [],
      file: { name: '', dataUrl: '' },
      selectedA: '',
      select1: [
        { value: 'role', label: '角色' },
        { value: 'version', label: '角色版本号' },
        { value: 'env', label: '环境' }
      ],
      loading: false,
      filters: {
        value1: '',
        value2: ''
      },
      select2: [],
      options1: ''
    }
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        if (newFile.size > 1 * 1024) {
          alert('图片大小不能超过 1MB!')
          prevent()
        }
      }
    },

    inputFile(newFile, oldFile) {
      if (newFile && !oldFile) {
        newFile.dataUrl = ''
        this.readFile(newFile)
      }
    },

    readFile(file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        file.dataUrl = e.target.result
      }
      reader.readAsDataURL(file)
    },

    input(files) {
      console.log(files)
    },
    getRole(prov) {
      const allrole = [
        { pro: 'role', label: 'pub' },
        { pro: 'role', label: 'core' },
        { pro: 'env', label: 'test' },
        { pro: 'pro', label: 'pro' },
        { pro: 'version', label: '1.1.2' },
        { pro: 'version', label: '1.1.1' }
      ]
      const roles = []
      this.select2 = []
      for (var val of allrole) {
        if (prov === val.pro) {
          console.log(val)
          roles.push({ label: val.label, value: val.label })
        }
        this.select2 = roles
      }
    },
    getList(opt) {
      console.log(opt)
      console.log(this.filters)
    }
  }
}
</script>
